import React, { Component } from 'react';

import Table from '../../../core/components/table';

import LevelEdit from './level.edit';

class Level extends Component {

    state = {
        showEditLevelData: {},
        showEdit: false,
    };

    render() {
        let columns = [
            { title: '理财金额(万元)', name: 'targetNum' },
            { title: '预期收益', name: 'rate' },
            { title: '操作', render: this.renderOpertion },
        ];
        return (
            <div>
                <h3 className="loc-relative">
                    收益分档
                    {'    '}
                    <button data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo" type="button" className="btn btn-sm btn-primary btn-absoute-add" onClick={() => this._onAdd()}>新增</button>
                </h3>

                <Table
                    isPage={false}
                    ref="table"
                    dataList={this.props.dataList}
                    columns={columns}></Table>

                <LevelEdit isShow={this.state.showEdit} levelData={this.state.showEditLevelData} onEdit={this._refresh}></LevelEdit>
            </div>
        );
    }

    renderOpertion = (dataItem, index) => {
        return (
            <div>
                <a onClick={() => this._onAdd(dataItem)}>编辑</a>
                {'    '}
                <a onClick={() => this._onDel(dataItem, index)}>删除</a>
            </div>
        );
    };

    _onAdd = (showEditLevelData) => {
        this.setState({ 'showEdit': true, showEditLevelData: showEditLevelData ? showEditLevelData : {} });
    };

    _onDel = (levelData, index) => {
        this.props.dataList.splice(index, 1);
        this.forceUpdate();
    };

    _refresh = (levelData) => {
        if (!levelData.id) {
            this.props.dataList.push(levelData);
        }
        this.setState({ 'showEdit': false });
    };
}

export default Level;